<template>
    <view class="page">
        <back :title="'预约详情'" :isBack="true" :isBg="false" :titleIconColor="'rgba(255, 255, 255, 1)'"></back>

        <scroll-view scroll-y class="content_box">
            <view class="top_box">
                <view class="car_n_p_box" v-if="category_id == 2">
                    <view class="left_carbox">
                        <view class="car_pic_box">
                            <image :src="vehImag" mode="widthFix" />
                        </view>
                        <view class="carname_ds_box">{{ vehNmae }} {{ carvalue }}{{ category_id == '1' ? '袋' : '车'
                            }}
                        </view>
                    </view>
                    <!-- <view class="right_carbox" @click="alterBtn">
                        更改<u-icon color="rgba(199, 199, 199, 1)" size="26" name="arrow-right"></u-icon>
                    </view> -->
                </view>
                <view class="dre_box">
                    <view class="left_drebox" v-if="location || locdetail">
                        <view class="left_dre_top_box">拉货地址
                            <text style="font-size: 28rpx;color: rgba(0, 0, 0, 1);font-weight: 600;margin-left: 8rpx;">
                                {{ locdetail }}
                            </text>
                        </view>
                        <view class="left_dre_bot_box">{{ location }}</view>
                    </view>
                    <view class="left_drebox" v-else>
                        <view class="left_dre_top_box" @click="lhdz"
                            style="height: 100rpx; line-height: 100rpx;text-align: left;font-size: 26rpx;">
                            拉货地址
                        </view>
                    </view>
                    <view class="right_box" @click="lhdz" v-if="location || locdetail">
                        修改<u-icon color="rgba(199, 199, 199, 1)" size="26" name="arrow-right"></u-icon>
                    </view>
                    <view class="right_box" @click="lhdz" v-else>
                        请选择<u-icon color="rgba(199, 199, 199, 1)" size="26" name="arrow-right"></u-icon>
                    </view>
                </view>
                <!-- 联系人 -->
                <view class="linkman_box">
                    <view class="linkman_text">联系人</view>
                    <view class="right_boxlianxi">
                        <input style="font-weight: 600;font-size: 26rpx;" :value="real_name" type="text"
                            placeholder="请输入" @blur="realBlur" placeholder-class="lxr_color"><u-icon
                            color="rgba(199, 199, 199, 1)" size="26" name="arrow-right"></u-icon>
                    </view>
                </view>
                <view style="margin: auto;width: 640rpx; height: 2rpx;background-color: rgba(240, 240, 240, 1);"></view>
                <!-- 联系电话 -->
                <view class="linkman_box">
                    <view class="linkman_text">联系电话</view>
                    <view class="right_boxlianxi">
                        <input style="font-weight: 600;font-size: 26rpx;" :value="phone" placeholder-class="lxr_color"
                            type="name" placeholder="请输入" @blur="phoneBlur"><u-icon color="rgba(199, 199, 199, 1)"
                            size="26" name="arrow-right"></u-icon>
                    </view>
                </view>
                <view style="margin: auto;width: 640rpx; height: 2rpx;background-color: rgba(240, 240, 240, 1);"></view>
                <!-- 上门时间 -->
                <view class="linkman_box">
                    <view class="linkman_text">上门时间</view>
                    <view class="right_boxlianxi" style="font-weight: 400;font-size: 26rpx;">
                        <time-page :dateTimeIndex="startDateTimeIndex" :travelDate="startClearingTime"
                            @updateTime="dateTimeChange"></time-page>
                        <u-icon color="rgba(199, 199, 199, 1)" size="26" name="arrow-right"></u-icon>
                    </view>
                </view>
            </view>


            <!-- 垃圾分类 -->

            <view class="garbage_box">
                <view class="linkman_box">
                    <view class="linkman_text">垃圾分类</view>
                    <view class="right_boxlianxi" @click="selFlBtn">
                        <text style="color:rgba(199, 199, 199, 1);font-size: 26rpx;" v-if="categoryCon == ''">请选择</text>
                        <text style="color: black;font-weight: 600;" v-else>{{ categoryCon }}</text>
                        <u-icon color="rgba(199, 199, 199, 1)" size="26" name="arrow-right"></u-icon>
                    </view>
                </view>
            </view>

            <!-- 订单备注 -->
            <view class="remarks_box" :style="{ height: category_id == 2 ? '200' : '100' + 'rpx' }">
                <view class="comment_box">
                    <view class="linkman_box">
                        <view class="linkman_text">装车方式</view>
                        <view class="right_boxlianxi" @click="reserveBtn">
                            <text style="color: black;font-weight: 600;">
                                {{ producttext }}
                            </text>
                            <u-icon color="rgba(199, 199, 199, 1)" size="26" name="arrow-right"></u-icon>
                        </view>
                    </view>
                </view>
                <view v-if="category_id == 2"
                    style="width: 100%; height: 2rpx;background-color: rgba(240, 240, 240, 1)"></view>

                <view class="copopud_box" v-if="category_id == 2">
                    <view class="linkman_box">
                        <view class="linkman_text">优惠券</view>
                        <view class="right_boxlianxi" @click="selCoupon">
                            <u-icon style="margin-right: 8rpx;" color="rgba(218, 224, 220, 1)" size="26"
                                v-if="couponObj.credit == 0" name="coupon"></u-icon>
                            <u-icon style="margin-right: 8rpx;" color="rgba(255, 141, 26, 1)" size="26" v-else
                                name="coupon"></u-icon>
                            <text style="color:rgba(199, 199, 199, 1);" v-if="couponObj.credit == 0">请选择</text>
                            <text style="color:black;" v-else>{{ '减' + (couponObj.credit * 1) + '元'
                                }}</text>
                            <u-icon color="rgba(199, 199, 199, 1)" size="26" name="arrow-right"></u-icon>
                        </view>
                    </view>
                </view>
            </view>
            <view class="sctp_box">
                <view class="scene_box">垃圾现场照片 <text class="zi_txt">(注:可添加多张)</text> </view>
                <view class="load_box">
                    <view class="zs_pic_box" v-for="(item, index) in lists" :key="index" @click="delPic(index)">
                        <image :src="item" mode="scaleToFill" />
                    </view>
                    <view class="add_pic_box" @click="upload_images">
                        <u-icon name="plus" color="rgba(199, 199, 199, 1)" size="60"></u-icon>
                    </view>
                    <view style=" width: 154rpx;" v-for="item in 4"></view>
                </view>
            </view>



        </scroll-view>
        <!-- 支付 -->
        <view class="sub_box">
            <!-- 通知 -->
            <view class="mess_box">
                <view class="laba_box">

                </view>
                <view class="mess_text_box">
                    只需预付30%定金即可，具体总费用待勘测员现场审核
                </view>
            </view>
            <template>
                <view class="price_box" style="margin-bottom: 36rpx;">

                    <text
                        style="font-size: 28rpx;font-weight: 400;color:rgba(128, 128, 128, 1);line-height: 75rpx;">定金:</text>{{
            threePrice
        }} <text
                        style="font-size: 28rpx;font-weight: 400;color:rgba(128, 128, 128, 1);margin-right: 22rpx;">
                        <text style="margin-left: 10rpx;">元</text></text>
                    <text style="font-size: 28rpx;font-weight: 400;color:rgba(128, 128, 128, 1);">预估尾款:{{
                estimate_balance_money }}元</text>
                </view>

            </template>

            <view class="submit_box" @click="$noMultipleClicks(submit)">
                确认下单
            </view>
        </view>
        <view class="sel_pic_box" v-if="imgShow">
            <image :src="categoryImg" mode="scaleToFill" @click="clickImg" />
        </view>
        <lb-picker :pickerTitle="'垃圾分类'" ref="categorypicker" :list="categoryList" :empty-text="label"
            @change="handleChange" @confirm="handleConfirm" @cancel="handleCancel" mask-color="rgba(9, 9, 11, .8)"
            :close-on-click-mask="false"></lb-picker>
        <lb-picker :pickerTitle="'装车方式'" ref="reservepicker" :list="reserveList" @confirm="reserveConfirm"
            :empty-text="label" @cancel="reserveCancel" mask-color="rgba(9, 9, 11, .8)"
            :close-on-click-mask="false"></lb-picker>
    </view>
</template>
<script>
import back from "@/components/goback/goback"
import timePage from '../../orderPage/components/timepage/timepage'
import LbPicker from '../../orderPage/components/lb-picker'
export default {
    components: {
        back, timePage, LbPicker
    },
    data() {
        // const currentDate = this.getDate({
        //     format: true
        // })
        return {
            noClick: true,//防连点
            startTimeNow: '',//当前时间
            startClearingTime: '', //开始时间
            startDateTimeIndex: [0, 0, 0],//开始时间默认选择
            endClearingTime: '', //结束时间
            endDateTimeIndex: [0, 0, 0],//结束时间默认选择
            imgShow: false,
            couponObj: {
                id: '',
                credit: 0
            },
            categoryList: [],
            reserveList: [],
            categoryCon: '',
            according: '', // 按照什么计价
            // streetext: '',//沿街还是非沿街
            producttext: '',//怎么装车
            CarObj: {},//车
            carvalue: '',// 多少袋子
            adredetObj: {},//地址信息
            category_id: '',//方和袋id
            // position_id: '',//沿街非沿街id
            product_id: '',//装车方式id
            vehicle_id: '',//车id
            appointment_time: '',//上门时间
            waste_id: '',//垃圾品类id
            address_id: '',//地址id
            location: '',//地址
            locdetail: '',//详细地址
            real_name: '',//联系人
            phone: '',//联系电话
            grossPrice: 0,//总价
            threePrice: "0.0",//3折价
            whether: true,// 判断缓存是否存在
            categoryCon: '',//垃圾品类
            categoryImg: '',//垃圾各类的图片
            action: "https://build.lwjcg.com/api/survey/upload?token=" + uni.getStorageSync("USERINFO"), // 演示地址
            showUploadList: true,
            // 如果将某个ref的组件实例赋值给data中的变量，在小程序中会因为循环引用而报错
            // 这里直接获取内部的lists变量即可
            lists: [],
            imgArr: [],
            vehicleId: '',
            vehNmae: '',
            vehImag: '',
            method_money: '',
            dgPrice: '',
            estimate_balance_money: ''
        }
    },
    onLoad(options) {
        console.log(options)
        switch (options.category_id) {
            case '1':
                this.according = "拼车拉(按袋计价)"
                break;
            case '2':
                this.according = "整车拉(按车计价)"
                break;
        }
        this.category_id = options.category_id
        this.producttext = options.producttext
        // this.CarObj = JSON.parse(options.vehicle)
        this.carvalue = options.carvalue
        this.category_id = options.category_id
        this.vehNmae = options.vehNmae
        this.vehImag = options.vehimg
        // this.position_id = options.position_id
        this.product_id = options.product_id
        this.vehicle_id = options.vehId
        this.dgPrice = options.dgPrice
        this.grossPrice = this.carvalue * (this.dgPrice * 1 + this.method_money)
        this.threePrice = (this.grossPrice * 0.3).toFixed(2)
        console.log(this.couponObj.credit, "优惠券")
        this.getReserve()
    },
    onShow() {
        this.couponObj = this.$store.state.couponObj
        this.estimate_balance_money = (this.grossPrice - this.threePrice - (this.couponObj.credit * 1)).toFixed(2)
        this.adFuzhi()//地址赋值
        uni.getStorageInfo({
            success: function (res) {
                if (res.keys.includes('carObj')) {
                    this.whether = true

                } else {
                    this.whether = false
                }
            }
        });

        if (JSON.stringify(this.$store.state.carObj) == '{}') {
            // this.vehObj = res.data[0]
        } else {
            this.CarObj = this.$store.state.carObj
        }
    },
    beforeDestroy() {
        console.log('离开123')
        this.$store.state.couponObj.credit = 0
        // console.log(this.$store.state.couponObj,"this.$store.state.couponObj")
    },
    methods: {
        upload_images() {
            let that = this;
            uni.chooseImage({
                count: 9,
                sizeType: ['original', 'compressed'],

                sourceType: ['album', 'camera'], //从相册选择

                success: (res) => {
                    const tempFilePaths = res.tempFilePaths
                    tempFilePaths.forEach((i) => {
                        this.lists.push(i)

                    })
                    for (let i = 0; i < tempFilePaths.length; i++) {
                        uni.uploadFile({
                            url: "https://build.lwjcg.com/api/survey/upload?token=" + uni.getStorageSync("USERINFO"),
                            filePath: tempFilePaths[i],

                            name: 'img_url[]',
                            header: {
                                // token: uni.getStorageSync('token'),
                            },
                            success: (uploadFileRes) => {
                                let imgRes = JSON.parse(uploadFileRes.data);
                                that.imgArr.push(imgRes.data[0])
                                // console.log(that.imgArr)
                            }
                        })
                    }
                }
            });
        },
        delPic(index) {
            let data = {
                img_url: this.imgArr[index]
            }
            this.$Request.post(this.$api.word.surveyRemove, data).then(res => {
                if (res.code == 200) {
                    uni.showToast({
                        title: '删除成功',
                        icon: 'none'
                    })
                }
            })
            this.lists.splice(index, 1)
            this.imgArr.splice(index, 1)



        },
        selCoupon() {
            uni.navigateTo({
                url: '/userPage/coupon/coupon?sysh=' + 1
            })
        },
        realBlur(e) {
            this.real_name = e.detail.value
        },
        phoneBlur(e) {
            this.phone = e.detail.value
        },
        adFuzhi() {
            this.adredetObj = this.$store.state.adObj
            console.log(this.adredetObj)
            this.address_id = this.adredetObj.id
            this.location = this.adredetObj.location//地址
            this.locdetail = this.adredetObj.detail//详细地址
            this.phone = this.adredetObj.phone//联系电话
            this.real_name = this.adredetObj.real_name//联系人
        },
        lhdz() {
            uni.navigateTo({
                url: '/userPage/directory/directory'
            })
        },
        alterBtn() {
            uni.navigateTo({
                url: '/orderPage/remodel/remodel?category_id=' + this.category_id + '&product_id=' + this.product_id
            })
        },
        getWaste() {
            this.$Request.post(this.$api.index.wasteList).then(res => {
                if (res.code == 200) {
                    res.data.forEach(item => {
                        item['label'] = item.waste_name
                    });
                    this.categoryList = res.data
                    // console.log(this.categoryList)
                }
            })
        },
        getReserve() {
            let data = {}
            if (this.category_id == '1') {
                data = {
                    category_id: this.category_id
                }
            } else {
                data = {
                    category_id: this.category_id,
                    product_id: this.product_id,
                }
            }

            this.$Request.post(this.$api.index.vehicleMethod, data).then(res => {
                if (res.code == 200) {

                    res.data.forEach(item => {
                        item['label'] = item.vehicle_method
                    });

                    // if (this.category_id == 1) {
                    //     res.data.splice(1)
                    // } else {
                    //     res.data.shift()
                    // }
                    this.reserveList = res.data
                    console.log(this.reserveList, 'reserveList')
                    this.producttext = res.data[0].vehicle_method
                    this.vehicleId = res.data[0].id
                }
            })
        },
        dateTimeChange(e) {
            this.appointment_time = e
        },
        clickImg() {
            uni.previewImage({
                urls: [this.categoryImg], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
                current: '', // 当前显示图片的http链接，默认是第一个
                success: function (res) { },
                fail: function (res) { },
                complete: function (res) { },
            })
        },

        selFlBtn() {
            this.getWaste()
            this.imgShow = true
            this.$refs.categorypicker.show() // 显示
        },

        handleChange(e) {//停止滑动触发
            this.categoryImg = e.item.img_url
        },
        handleConfirm(e) {//点击确认触发
            this.categoryCon = e.item.label
            this.imgShow = false
            this.waste_id = e.item.id
        },
        handleCancel(e) {//点击取消触发
            this.imgShow = false
        },

        reserveBtn() {
            this.$refs.reservepicker.show() // 显示
        },
        reserveConfirm(e) {//点击确认触发
            this.producttext = e.item.vehicle_method
            this.vehicleId = e.item.id
            this.method_money = e.item.vehicle_price * 1
            this.grossPrice = this.carvalue * (this.dgPrice * 1 + this.method_money)
            this.threePrice = (this.grossPrice * 0.3).toFixed(2)
            this.estimate_balance_money = (this.grossPrice - this.threePrice - (this.couponObj.credit * 1)).toFixed(2)
        },
        reserveCancel(e) {//点击取消触发
        },
        submit() {

            if (!this.location) {
                uni.showToast({
                    title: '请选择地址',
                    icon: 'none'
                })
            } else if (!this.real_name) {
                uni.showToast({
                    title: '联系人不能为空',
                    icon: 'none'
                })
            } else if (!this.phone) {
                uni.showToast({
                    title: '请输入联系电话',
                    icon: 'none'
                })
            } else if (this.appointment_time == '') {
                uni.showToast({
                    title: '请选择上门时间',
                    icon: 'none'
                })
            } else if (this.categoryCon == '') {
                uni.showToast({
                    title: '请选择垃圾分类',
                    icon: 'none'
                })
            } else if (this.lists.length == 0) {
                uni.showToast({
                    title: '请上传垃圾现场照片',
                    icon: 'none'
                })
            } else {
                let data = {
                    num: this.carvalue,
                    category_id: this.category_id,
                    // position_id: this.position_id,
                    // vehicle_method: this.producttext,
                    product_id: this.product_id,
                    waste_id: this.waste_id,
                    coupon_list_id: this.couponObj.id,
                    address_id: this.address_id,
                    appointment_time: this.appointment_time,
                    vehicle_id: this.vehicle_id,
                    environment_imgs: this.imgArr,
                    method_id: this.vehicleId
                }
                // console.log(data)
                this.$Request.post(this.$api.order.orderAdd, data).then(res => {
                    if (res.code == 200) {
                        this.Payment(res.data)
                        this.$store.state.couponObj = {}
                    }
                })
            }



        },
        // 拉起支付
        Payment(pay_data) {
            uni.requestPayment({
                provider: 'wxpay',
                timeStamp: pay_data.timeStamp.toString(),
                nonceStr: pay_data.nonceStr,
                signType: 'MD5',
                package: pay_data.package,
                paySign: pay_data.paySign,
                success(res) {
                    console.log(res)
                    uni.showToast({
                        title: '支付成功',
                        icon: 'none'
                    })
                    setTimeout(() => {
                        uni.navigateTo({
                            url: '/orderPage/successful/successful'
                        })
                    }, 1000)
                },
                fail(err) {
                    console.log(err)
                    uni.showToast({
                        title: '支付失败',
                        icon: 'none'
                    })
                    setTimeout(() => {
                        uni.setStorageSync('active', 1);
                        uni.navigateTo({ url: '/orderPage/order/index' })
                    }, 1000)
                }
            })
        }
    }
}
</script>
<style lang="scss">
.lxr_color {
    font-weight: 400;
    color: rgba(199, 199, 199, 1);
}

.page {
    width: 100vw;
    height: 100vh;
    background-image: url('https://build.lwjcg.com/uploads/order_detail.png');
    background-size: 100% 100%;
    position: relative;

    .sel_pic_box {
        width: 480rpx;
        height: 540rpx;
        border-radius: 38rpx;
        position: absolute;
        border: 4rpx solid rgba(255, 255, 255, 1);
        left: 0;
        right: 0;
        top: 346rpx;
        margin: auto;
        z-index: 999999;

        image {
            width: 100%;
            height: 100%;
            border-radius: 38rpx;
        }

    }

    .content_box {
        width: 100vw;
        height: calc(100vh - 560rpx);

        .top_box {
            width: 704rpx;
            // height: 570rpx;
            border-radius: 28rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            margin-top: 54rpx;
            box-sizing: border-box;
            padding-top: 40rpx;
            // padding-bottom: 40rpx;

            .car_n_p_box {
                width: 640rpx;
                height: 100rpx;
                margin: auto;
                display: flex;
                justify-content: space-between;
                margin-bottom: 29rpx;

                .left_carbox {
                    width: 440rpx;
                    height: 100rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .car_pic_box {
                        width: 84rpx;
                        height: 84rpx;
                        border-radius: 50%;
                        border: 2rpx solid rgba(229, 229, 229, 1);
                        background-color: #e8fcee;
                        margin-right: 30rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        image {
                            width: 100%;
                            // height: 70%;
                        }
                    }

                    .carname_ds_box {
                        height: 84rpx;
                        line-height: 84rpx;
                        opacity: 1;
                        font-size: 32rpx;
                        font-weight: 600;
                        color: rgba(51, 51, 51, 1);

                    }
                }

                .right_carbox {
                    height: 100rpx;
                    line-height: 100rpx;
                    font-size: 26rpx;
                    font-weight: 400;
                    color: rgba(199, 199, 199, 1);
                }
            }


            .dre_box {
                width: 640rpx;
                height: 100rpx;
                margin: auto;
                display: flex;
                justify-content: space-between;
                // margin-bottom: 29rpx;
                border-bottom: 2rpx solid rgba(240, 240, 240, 1);

                .left_drebox {
                    width: 440rpx;
                    height: 100rpx;

                    .left_dre_top_box {
                        width: 100%;
                        height: 40rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: rgba(51, 51, 51, 1);
                    }

                    .left_dre_bot_box {
                        width: 100%;
                        height: 60rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        line-height: 60rpx;
                        font-size: 26rpx;
                        font-weight: 400;
                        letter-spacing: 0.45rpx;
                        line-height: 39.2rpx;
                        color: rgba(166, 166, 166, 1);
                    }
                }

                .right_box {
                    height: 100rpx;
                    line-height: 100rpx;
                    font-size: 26rpx;
                    font-weight: 400;
                    color: rgba(199, 199, 199, 1);
                }
            }

            .linkman_box {
                width: 640rpx;
                height: 98rpx;
                margin: auto;
                display: flex;
                justify-content: space-between;
                align-items: center;

                // input::placeholder {
                //     color: rgba(199, 199, 199, 1);
                //     /* 你想要的颜色代码 */
                // }

                .linkman_text {
                    width: 156rpx;
                    height: 98rpx;
                    font-size: 26rpx;
                    font-weight: 400;
                    line-height: 98rpx;
                    color: rgba(51, 51, 51, 1);



                }

                .right_boxlianxi {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;



                    input {
                        text-align: right;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: rgba(0, 0, 0, 1);

                    }
                }

            }
        }

        .garbage_box {
            width: 704rpx;
            height: 96rpx;
            opacity: 1;
            border-radius: 28rpx;
            background: rgba(255, 255, 255, 1);
            margin: 20rpx auto;

            .linkman_box {
                width: 640rpx;
                height: 100%;
                margin: auto;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .linkman_text {
                    width: 156rpx;
                    height: 100%;
                    font-size: 26rpx;
                    font-weight: 400;
                    line-height: 96rpx;
                    color: rgba(51, 51, 51, 1);


                }

                .right_boxlianxi {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    input {
                        text-align: right;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: rgba(0, 0, 0, 1);
                    }
                }

            }

        }

        .remarks_box {
            width: 704rpx;
            border-radius: 28rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            margin-bottom: 20rpx;

            .comment_box {
                width: 100%;
                height: 99rpx;

                .linkman_box {
                    width: 640rpx;
                    height: 100%;
                    margin: auto;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .linkman_text {
                        width: 156rpx;
                        height: 100%;
                        font-size: 26rpx;
                        font-weight: 400;
                        line-height: 99rpx;
                        color: rgba(51, 51, 51, 1);


                    }

                    .right_boxlianxi {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        input {
                            text-align: right;
                            font-size: 28rpx;
                            font-weight: 400;
                            color: rgba(0, 0, 0, 1);
                        }
                    }

                }
            }

            .copopud_box {

                width: 100%;
                height: 99rpx;

                .linkman_box {
                    width: 640rpx;
                    height: 100%;
                    margin: auto;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .linkman_text {
                        width: 156rpx;
                        height: 100%;
                        font-size: 26rpx;
                        font-weight: 400;
                        line-height: 99rpx;
                        color: rgba(51, 51, 51, 1);


                    }

                    .right_boxlianxi {
                        height: 100%;
                        font-size: 26rpx;
                        font-weight: 400;
                        line-height: 99rpx;
                    }

                }
            }

        }

        .sctp_box {
            width: 704rpx;
            min-height: 274rpx;
            border-radius: 28rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            box-sizing: border-box;
            padding: 28rpx 0 0 34rpx;
            margin-bottom: 20rpx;

            .scene_box {
                height: 40rpx;
                opacity: 1;
                /** 文本1 */
                font-size: 26rpx;
                font-weight: 400;
                line-height: 40rpx;
                color: rgba(51, 51, 51, 1);
                margin-bottom: 32rpx;

                .zi_txt {
                    font-size: 26rpx;
                    font-weight: 400;
                    color: rgba(128, 128, 128, 1);
                }


            }

            .load_box {
                width: 100%;
                min-height: 152rpx;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                padding-bottom: 20rpx;

                .zs_pic_box {
                    width: 154rpx;
                    height: 132rpx;
                    opacity: 1;
                    border-radius: 18rpx;
                    background: rgba(240, 240, 240, 1);
                    flex-shrink: 0;
                    margin-bottom: 10rpx;

                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 18rpx;
                    }

                }

                .add_pic_box {
                    width: 154rpx;
                    height: 132rpx;
                    opacity: 1;
                    border-radius: 18rpx;
                    background: rgba(240, 240, 240, 1);
                    text-align: center;
                    line-height: 154rpx;

                }
            }

        }



    }

    .sub_box {
        width: 100%;
        height: 380rpx;
        background-color: rgba(255, 255, 255, 1);
        position: fixed;
        bottom: 0;

        .mess_box {
            width: 750rpx;
            height: 56rpx;
            background: rgba(255, 244, 232, 1);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 32rpx;

            .laba_box {
                width: 36rpx;
                height: 31rpx;
                background-image: url('https://rubbish.lwjcg.com/static/index/hou.png');
                background-size: 100% 100%;
                margin-right: 20rpx;
            }

            .mess_text_box {
                height: 34rpx;
                font-size: 24rpx;
                font-weight: 400;
                line-height: 34rpx;
                color: rgba(255, 141, 26, 1);

            }

        }

        .price_box {
            height: 72rpx;
            width: 100%;
            text-align: center;
            line-height: 72rpx;
            font-size: 72rpx;
            font-weight: 700;
            color: rgba(0, 0, 0, 1);
            margin-bottom: 16rpx;
        }

        .quan_box {
            width: 94rpx;
            height: 28rpx;
            border-radius: 6rpx;
            border: 2rpx solid rgba(255, 141, 26, 1);
            font-size: 20rpx;
            font-weight: 400;
            line-height: 26rpx;
            color: rgba(255, 141, 26, 1);
            text-align: center;
            margin: auto;
            margin-bottom: 16rpx;

        }

        .submit_box {
            margin: auto;
            width: 652rpx;
            height: 100rpx;
            opacity: 1;
            border-radius: 20rpx;
            background: rgba(26, 194, 121, 1);
            text-align: center;
            line-height: 100rpx;
            font-size: 36rpx;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);

        }
    }

}
</style>